<template>
	<view>
		<view :class="{'item':!on,'item-on':on,'u-border-bottom':on}" class="list" @tap="goProduct(info.id)">
			<!-- <view
				style="width: 90rpx;height: 90rpx;background-color: #d89c77;border-radius: 50%;border: 4rpx solid #d9d2c7;z-index: 100;text-align: center;color: #FFF;font-weight: bold;position: absolute;margin-left: 250rpx;margin-top: -30rpx;">
				<view style="font-size: 24rpx;line-height: 26rpx;margin-top: 20rpx;">立省</view>
				<view style="font-size: 32rpx;line-height: 34rpx;">
					{{parseInt(info.costPrice-info.price)}}
				</view>
			</view> -->
			<view :class="{'image-on':on}">
				<image :src="info.image" :class="{'image-on':on,'image':!on}" mode="widthFix" />
			</view>
			<view :class="{'info-on':on,'info':!on}">
				<!-- <view style="font-size: 26rpx;color: #46423e;">
					[云朵艾杨]
				</view> -->
				<view class="u-line-1" style="font-size: 32rpx;color: #46423e;">{{info.storeName}}</view>

				<view style="margin-top: 40rpx;" class="u-flex u-row-between">
					<view>
						<view style="font-size: 34rpx;font-weight: bold;color:#e27f45;">￥{{info.price}}</view>
						<view style="font-size: 26rpx;text-decoration: line-through;color: #82978e;">
							￥{{info.costPrice}}</view>
					</view>
					<view>
						<image src="../static/images/cart-fill.png" style="width: 40rpx;height: 40rpx;" />
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		goNav
	} from '@/lib/Comment.js'
	export default {
		components: {},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			on: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			goProduct(id) {
				goNav("/pages/sub/store/detail?id=" + id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-on {
		//padding: 20rpx 0;
		border-radius: 25rpx;
	}

	.item {
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		border-bottom: 5rpx solid #ffffff;
		border-right: 5rpx solid #ffffff;
		box-shadow: 2rpx 2rpx 2rpx #dcfff0;
		padding: 4rpx;
	}

	.list {
		font-size: 30rpx;
		color: #3b3b3b;
		background-color: #FFFFFF;

	}

	.image {
		width: 100%;
		border-radius: 15rpx;
		vertical-align: sub;
	}

	.image-on {
		width: 100%;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.info-on {
		min-height: 180rpx;
		padding: 0 20rpx;

	}

	.info {
		padding: 20rpx;
		background-color: #e6ecea;
		border-radius: 0 0 15rpx 15rpx;
	}

	.level-on {
		height: 40rpx;
	}

	.level {}

	.sales {
		color: #a5a5a5;
	}

	.text {
		background-color: $theme-color;
		font-size: 26rpx;
		padding: 5rpx 10rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		color: #5e5e5e;
	}

	.button {
		line-height: 50rpx;
		background-color: $base-color;
		padding: 0 20rpx;
		border-radius: 25rpx;
		color: #FFFFFF;

	}
</style>
